<template>
	<div class="header">
		<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect">
		<div class="logo">环保管家</div>
		  <el-submenu index="1">
		  	<template slot="title">企业信息</template>
		    <el-menu-item index="base">基本信息</el-menu-item>
		    <el-menu-item index="1-2">产品信息</el-menu-item>
		  </el-submenu>
		  <el-submenu index="2">
		    <template slot="title">产污情况</template>
		    <el-menu-item index="userList">固体废物管理</el-menu-item>
		    <el-menu-item index="2-2">废气管理</el-menu-item>
		    <el-menu-item index="2-3">废水管理</el-menu-item>
		    <el-menu-item index="2-4">核与辐射</el-menu-item>
		    <el-menu-item index="2-5">噪声</el-menu-item>
		  </el-submenu>
		  <el-menu-item index="3">文件管理</el-menu-item>
		  <el-submenu index="4">
		    <template slot="title">排污许可计算</template>
		    <el-menu-item index="4-1">电镀</el-menu-item>
		    <el-menu-item index="4-2">水泥</el-menu-item>
		    <el-menu-item index="4-3">铅锌冶炼</el-menu-item>
		    <el-menu-item index="4-4">铜冶炼</el-menu-item>
		    <el-menu-item index="4-5">铝冶炼</el-menu-item>
		  </el-submenu>
		  <el-submenu index="5">
		    <template slot="title">设置</template>
		    <el-menu-item index="5-1">我的企业</el-menu-item>
		  </el-submenu>
		  <el-menu-item index="6">联系专属客服</el-menu-item>
		<div class="user-info">
			<el-dropdown trigger="click" @command="handleCommand">
				<span class="el-dropdown-link">
                    <img class="user-logo" v-bind:src=headimgurl>
                    {{nickname}}
                </span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="loginout">退出</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</div>
		</el-menu>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				activeIndex2: '1'
			}
		},
		computed: {
			nickname() {
				let nickname = localStorage.getItem('nickname');
				return nickname ? nickname : '匿名';
			},
			headimgurl(){
				let headimgurl = localStorage.getItem('headimgurl');
				return headimgurl ? headimgurl : '../../../static/img/img.jpg';
			}
		},
		methods: {
			 handleSelect(key, keyPath) {
			 	if (key == 'userList' || key == 'base') {
			        this.$router.push('/' + key);
			 	}else{
			 		this.$message('敬请期待');
			 	}
		      },
			handleCommand(command) {
				const self=this;
				if(command == 'loginout') {
					localStorage.setItem('token', 0);
					self.$router.push('/login');
				}
			}
		}
	}
</script>
<style scoped>
	.el-menu-demo {
		background-color: #eef1f6;
	}
	.el-submenu > .el-submenu__title {
		color: #20a0ff;
	}
	.header {
		position: relative;
		box-sizing: border-box;
		width: 100%;
		height: 60px;
		font-size: 22px;
		line-height: 60px;
		color: #48576a;
	}
	
	.header .logo {
		float: left;
		width: 250px;
		text-align: center;
		z-index: 99;
	}
	
	.user-info {
		float: right;
		padding-right: 50px;
		font-size: 16px;
		color: #48576a;
	}
	
	.user-info .el-dropdown-link {
		position: relative;
		display: inline-block;
		padding-left: 50px;
		color: #48576a;
		cursor: pointer;
		vertical-align: middle;
	}
	
	.user-info .user-logo {
		position: absolute;
		left: 0;
		top: 15px;
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}
	
	.el-dropdown-menu__item {
		text-align: center;
	}
</style>